<template>
  <div class="skill-history" id="skillReport">
    <crumb isShowBack/>
    <!-- 版心 -->
    <div class="main-tj">
      <!-- 左侧 -->
      <div class="main-left">
        <div class="top-box">
          <div class="title">任务名称：{{trainingName}}</div>
          <div class="descript">任务要求：{{trainingRemark}}</div>
          <div class="topic-count">
            <span>题量:{{subjectNum}}</span>
          </div>
        </div>
        <div class="middle-box">
          <p>共有<span class="people-count">{{finishedSize}}</span> 人完成本课</p>
          <div class="finishedList">
            <div :key="i" v-for="(item, i) in finishedPeopleList" class="list">
              <div class="left">
                <span class="ranking">{{i+1}}</span>
                <div class="img cursor">
                  <img class="i" :src="item.head_img_url" />
                </div>
                <dl>
                  <dt>{{item.name}}&lceil;{{item.class_name}}&rfloor;</dt>
                  <dd>{{item.end_time}}&nbsp;&nbsp;耗时：{{item.duration | returnDate}}&nbsp;&nbsp;分数：{{Number(item.score)}}</dd>
                </dl>
              </div>
              <div class="right cursor" @click="islike(item, item.id)">
                <svg t="1580360463637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2147" width="24" height="24"><path d="M884.875894 423.143253L646.970506 423.143253c92.185562-340.464205-63.516616-357.853247-63.516616-357.853247-65.993017 0-52.312436 52.18247599-57.3031 60.881602 0 166.502152-176.849824 296.971645-176.849824 296.971645l1e-8 472.171899c0 46.607504 63.516616 63.393819 88.43309799 63.393819l357.452111 0c33.641191 0 61.036122-88.224344 61.036122-88.224344 88.43412199-300.70569 88.434122-390.177444 88.43412199-390.177444C944.657442 418.179195 884.875894 423.143253 884.875894 423.143253L884.875894 423.143253 884.875894 423.143253zM884.875894 423.143253" :fill="item.likeType===2?'#909399':'#409EFF'" p-id="2148"></path><path d="M251.671415 423.299819L109.214912 423.299819c-29.420053 0-29.873378 28.89612-29.873378 28.89612l29.420053 476.202703c0 30.30930601 30.36149501 30.309306 30.36149499 30.309306L262.42022301 958.707948c25.68600901 0 25.458835-20.049638 25.458835-20.049638L287.87905801 459.411271C287.879058 422.837284 251.671415 423.299819 251.671415 423.299819L251.671415 423.299819 251.671415 423.299819zM251.671415 423.299819" :fill="item.likeType===2?'#909399':'#409EFF'" p-id="2149"></path></svg>
                <span>{{item.like_num}}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="bottom-box">
          <div class="my-train">
            <span style="font-size:22px;font-weigth:900;">我的训练</span>
            <span class="tip" style="font-size:14px;">
              <img style="height:19px;padding-right:8px;"
              src="~@/assets/images/tip.png" alt= /> 统计说明
            </span>
          </div>
          <div class="box">
            <p style="font-size:16px;font-weight:900;color:#101D37;">
              Unit 1 Job and Careers
            </p>
            <p style="font-size:14px;color:rgba(16,29,55,1);">
              单元：Lesson 1 Making An Orientation
            </p>
            <span style="font-size:16px;color:#101D37;"
              >完成时间：2019-06-22 15:15:22</span
            >
            <tj-circle :circelData="circelData"></tj-circle>
            <div class="start">
              <el-button type="primary">重新训练</el-button>
            </div>
          </div>
        </div> -->
      </div>
      <!-- 右侧 -->
      <div class="main-right">
        <div class="history-show-title">训练报告</div>
        <div class="finish-time">{{end_time}}&nbsp;<i  @click="instructions" class="el-icon-question cursor"></i></div>
        <div style="clear:both"></div>
        <div class="chartBox">
          <tj-circle :circelData="circelData"></tj-circle>
        </div>
        <div class="space"></div>
        <div class="analysis-title">
          <span>答题情况</span>
          <span class="analysis">点击题目查看解析</span>
        </div>
        <!-- 题目正确与否展示 -->
        <div class="result">
          <div class="cursor result-item" :key="i" v-for="(item, i) in subjectList">
            <el-button :type="item.rightFlag === 1 ? 'success' : 'danger'" @click="answerAnalyse(item.subjectId)" circle>{{ i + 1 }}</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog class="dialog" title="实践技能-答案解析" :visible.sync="dialogVisible">
        <!-- 题目内容 -->
        <div class="topic">
          <div>
            <div class="right-collection"  @click="topic.hasCollected?cancelCollectTest():collectTest()">
              <svg t="1580382044313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2100" width="26" height="26"><path d="M752 939.2c-9.6 0-20.8-3.2-30.4-8l-208-104L304 931.2c-20.8 11.2-48 9.6-67.2-4.8-19.2-14.4-30.4-40-25.6-64l43.2-224-164.8-153.6c-17.6-17.6-24-44.8-17.6-67.2 8-24 27.2-41.6 52.8-44.8l228.8-41.6 102.4-208c11.2-22.4 33.6-36.8 57.6-36.8s48 14.4 57.6 36.8l102.4 208 228.8 40c24 3.2 44.8 20.8 51.2 44.8 8 24 1.6 49.6-16 67.2l-164.8 155.2 41.6 224c4.8 25.6-6.4 49.6-25.6 64-9.6 8-22.4 12.8-36.8 12.8z" :fill="topic.hasCollected?'#E6A23C':'#C0C4CC'" p-id="2101"></path></svg>
            </div>
            <div v-for="(item, i) in topic.titleList" :key="i+99">
              <div class="question-title" v-if="item.displayType === '1'" v-html="item.resourceTrainingContentEn"></div>
              <!-- 图片 -->
              <div class="media-box" v-if="item.displayType === '2'">
                <img :src="item.fileUrl" style="width:100%">
              </div>
              <!-- 音频 -->
              <div class="media-box" v-if="item.displayType === '3'">
                <audio class="audio" controls :src="item.fileUrl" controlsList="nodownload"></audio>
              </div>
              <!-- 视频 -->
              <div class="media-box" v-if="item.displayType === '4'">
                <video class="video" controls :src="item.fileUrl">
                </video>
              </div>
            </div>
            <div class="question-title" v-html="topic.subject_content"></div>
            <div v-for="(item, i) in topic.options" :key="i">
              <div class="item">
                <span class="chooseBtn" >{{item.answer_code}}</span>
                <span class="question-content">
                  {{ item.resource_subject_item_tent }}
                </span>
              </div>
            </div>
          </div>
          <div class="question-title"><b>我的答题情况</b></div>
          <div class="item flexBox">
            <span class="question-content">我的答案：{{topic.myAnswer}}</span>
            <span class="question-content">正确答案：{{topic.rightAnswer}}</span>
            <!-- <span class="question-content">正确答案：<span v-for="(item, i) in topic.rightAnswer" :key="i">{{item}}</span></span> -->
            <span class="question-content">正确率：{{topic.rightRate}}</span>
          </div>
          <div class="question-title"><b>各选项占比</b></div>
          <div v-for="(item, i) in topic.answerRate" :key="i">
              <div class="item">
                <span class="chooseBtn" style="width:50px;margin-right: 10px">{{item.resource_subject_item_content_en||item.answer_code}}</span>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="Number(item.answer_rate)" status="success" style="width:85%"></el-progress>
              </div>
            </div>
          <div class="question-title"><b>答案解析</b></div>
          <div class="question-title" v-html="topic.subject_answer_anaylse"></div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入circle
import TjCircle from './component/Circle'
import { Practice } from './../practiceApi.js'
export default {
  name: 'skillReport',
  components: {
    TjCircle
  },
  data () {
    return {
      lessonName: '', // 当前课程名
      trainingName: '', // 任务名称
      trainingRemark: '', // 任务要求
      finishedPeopleList: [],
      finishedSize: 0,
      subjectNum: 0, // 题量
      rank: 1, // 排名
      end_time: '', // 完成时间
      checkMessage: '训练成绩按最高一次为准',
      circelData: [
        {
          name: '时长',
          text: '15’30',
          percentage: 0
        },
        {
          name: '得分',
          text: '80',
          percentage: 0,
          status: 'success'
        },
        {
          name: '排名',
          text: '17',
          percentage: 0,
          // status有三种形式
          // warning 黄色 success 绿色
          status: 'warning'
        }
      ],
      subjectList: [],
      dialogVisible: false,
      topic: {
        hasCollected: false,
        collectId: false,
        subjectId: '',
        file_url: '',
        subject_id: '', // 题目id
        titleList: [], // 原型
        subject_content: '', // 题目内容
        myAnswer: '', // 我的回答
        rightAnswer: '', // 正确答案
        rightRate: '', // 正确率
        itemList: [], // 选项
        answerRate: [], // 正确率
        subject_answer_anaylse: '', // 答案解析
        options: [] // 题目配置项
      }
    }
  },
  methods: {
    instructions () { // 任务说明
      this.$alert(this.checkMessage, '任务说明', {
        confirmButtonText: '确定'
      })
    },
    returnDate (time) {
      if (time < 60) {
        return time < 10 ? '00:0' + time : '00:' + time
      } else if (time < 3600) {
        return Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60) : Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60)
      } else {
        return time + 's'
      }
    },
    async getReport () { // 获取报告
      let res = await Practice.getReport({
        lessonTrainingId: this.$route.query.lessonTrainingId
      })
      let data = res.data
      if (res.code === '200') {
        this.lessonName = data.lessonName
        this.trainingRemark = data.trainingRemark || '接口无数据或接口无此字段'
        this.trainingName = data.trainingName
        this.subjectNum = data.subjectNum
        this.rank = data.rank
        this.circelData[0].text = this.returnDate(data.duration)
        this.circelData[2].text = data.rank
        this.circelData[0].percentage = Number(data.duration / (60 * 15) * 100) <= 100 ? Number(data.duration / (60 * 15) * 100) : 100
        this.subjectList = data.subjectList
        this.circelData[1].text = Number(data.score)
        this.circelData[1].percentage = Number(data.score)
        this.finishedList()
      } else {
        this.$message.error(res.message)
      }
    },
    async finishedList () { // 完成人列表
      let res = await Practice.finishedList({
        lessonTrainingCatalogId: this.$route.query.lessonTrainingCatalogId,
        resourceTrainingId: this.$route.query.resourceTrainingId
      })
      if (res.code === '200') {
        let data = res.data
        this.finishedPeopleList = data.finishedList.map((el, i) => {
          if (i === Number(this.rank) - 1) {
            this.end_time = '完成时间：' + el.end_time
          }
          let newEl = Object.assign(el, { likeType: 2 })
          return newEl
        })
        this.finishedSize = data.finishedSize // 完成人数
        this.circelData[2].percentage = Number(this.rank / data.finishedList.length) < 100 ? Number(this.rank / data.finishedList.length) : 100

        // console.log(res)
      } else {
        this.$message.error(res.message)
      }
    },
    async islike (item, id) { // 点赞
      let data = {
        id: id,
        likeType: item.likeType === 1 ? 2 : 1
      }
      if (item.name === this.$store.state.user.userInfo.name) {
        return this.$message.error('自己不能给自己点赞哦')
      }
      let res = await Practice.islike(data)
      if (res.code === '200') {
        item.likeType = item.likeType === 1 ? 2 : 1
        item.like_num += item.likeType === 1 ? 1 : -1
      } else {
        this.$message.error(res.message)
      }
    },
    async answerAnalyse (subjectId) { // 获取解析
      this.dialogVisible = true
      this.topic.subjectId = subjectId
      let res = await Practice.answerAnalyse({
        subjectId: subjectId,
        id: this.$route.query.lessonTrainingId
      })
      if (res.code !== '200') {
        return this.$message.error(res.message)
      }
      let data = res.data
      this.topic.titleList = data.titleList
      this.topic.collectId = data.collectId
      this.topic.hasCollected = !!data.collectId
      this.topic.subject_content = data.subjectMap.subject_content
      if (data.subjectMap.itemList) {
        this.topic.options = data.subjectMap.itemList.map((el, i) => {
          return {
            answer_code: el.answer_code || ['A', 'B', 'c', 'D'][i],
            resource_subject_item_tent: el.resource_subject_item_tent
          }
        })
      } else if (data.subjectMap.right_answer_list) {
        this.topic.options = data.subjectMap.right_answer_list.map((el, i) => {
          return {
            answer_code: el.answer_code,
            resource_subject_item_tent: el.right_answer
          }
        })
      }
      this.topic.answerRate = data.subjectMap.subject_type === '13' ? data.answerRate.map(el => {
        el.answer_rate = el.rate_data.filter(ele => { return ele.item === el.right_answer }).map(ele => { return ele.rate })
        return el
      }) : data.answerRate
      this.topic.myAnswer = data.subjectMap.subject_type === '13' ? data.answerRate.map(el => {
        const answer = el.stu_answer || '未作答'
        return el.answer_code + '.' + answer
      }).join(';') : data.myAnswer
      this.topic.rightAnswer = data.subjectMap.subject_type === '13' ? data.subjectMap.right_answer_list.map(el => { return el.answer_code + '.' + el.right_answer }).join(';') : data.subjectMap.right_answer
      this.topic.rightRate = Number(data.rightRate) + '%'
      this.topic.subject_answer_anaylse = data.subjectMap.subject_answer_anaylse
      // console.log(this.topic.options)
    },
    async collectTest () { // 收藏
      const res = await Practice.collectTest({
        subjectId: this.topic.subjectId,
        lessonTrainingId: this.$route.query.lessonTrainingId
      })
      if (res.code === '200') {
        this.topic.hasCollected = true
        this.topic.collectId = res.data.collectId
        this.$message('收藏成功！')
      } else {
        this.$message.error(res.message)
      }
    },
    async cancelCollectTest () {
      const res = await Practice.cancelCollectTest({
        collectId: this.topic.collectId
      })
      if (res.code === '200') {
        this.$message('取消收藏成功！')
        this.topic.hasCollected = false
      } else {
        this.$message.error(res.message)
      }
    }
  },
  mounted () {
    this.getReport()
  },
  filters: {
    returnDate (time) {
      if (time < 60) {
        return time < 10 ? '00:0' + time : '00:' + time
      } else if (time < 3600) {
        return Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60) : Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60)
      } else {
        return '大于一小时'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#skillReport{
  .flexBox{
    display: flex;justify-content: space-between;flex-wrap: wrap
  }
  .main-left{
    padding: 10px;line-height: 1.75;white-space: pre-wrap;text-align: justify;height: auto;width:calc(50% -  20px);background: #fff;
    .top-box {
      box-sizing: border-box;border-bottom: 1px solid #e5e5e5;
      .title {
        font-size: 16px;font-weight: bold;padding: 16px 12px;
      }
      .descript {
        font-size: 16px;color: #101d37;line-height: 1.75;text-align: justify;padding: 0 12px;
      }
      .topic-count {
        margin: 20px 12px;font-size: 14px;color: #91959a;
      }
    }
  }
  .middle-box {
    padding: 16px 12px;max-height:600px;overflow: auto;
    .people-count {
      color: #f86f33;padding: 0 5px;
    }
    .finishedList {
      margin: 16px 12px;padding-top: 20px;
      .list{
        padding-bottom: 20px;
      }
      .left {
        display:inline-block;
        .ranking{
          width: 20px;height: 40px;display:inline-block;line-height: 40px;text-align: center;vertical-align: top;margin-right: 5px;font-size: 20px;color: #909399;
        }
        .ranking:nth-child(1){
          font-weight: bold;color: #409EFF;
        }
        .ranking:nth-child(2){
          font-weight: bold;color: #67C23A;
        }
        .ranking:nth-child(3){
          font-weight: bold;color: #E6A23C;
        }
        .img {
          overflow: hidden;width: 40px;height: 40px;border-radius: 50%;display: inline-block;
          .i {
            width: 100%;
          }
        }
        dl{
          display:inline-block;
          dt{
            line-height: 1;font-size: 16px;color: #101d37;padding-left: 10px;margin-bottom: 12px;
          }
          dd{
            line-height: 1;font-size: 12px;padding-left: 10px;color: #909399
          }
        }
      }
      .right {
        float: right;display: flex;align-items: center;flex-wrap: wrap;width: 30px;
        height: 40px;
        span{
          line-height: 1;padding-top: 4px;text-align:center;display: block;width: 100%;
          color: #909399
        }
      }
    }
  }
  // 右侧历史记录
  .main-right {
    box-sizing: border-box;padding: 10px;width: 50%;height: auto;background: #fff;
    .history-show-title {
      padding: 16px 12px;font-size: 16PX;color: #101d37;font-weight: bold;float: left;
    }
    .finish-time {
      margin: 16px 12px;font-size: 16px;color: #101d37;float: right
    }
    .chartBox{
      width: 90%;margin: 30px auto;
    }
    .space {
      margin-top: 20px;border-bottom: 1px dashed #e5e5e5;
    }
    .analysis-title {
      display: flex;justify-content: space-between;padding: 16px 12px;font-size: 16PX;color: #101d37;font-weight: bold;margin-top: 20px;
      .analysis {
        color: #909399;font-size: 14px;
      }
    }
    .result {
      margin-top: 30px;width:calc(100% - 40px);height: 410px;overflow: auto;padding: 0 20px;
      .result-item {
        width: calc(100%/7 - 20px);height: 0;border-radius: 5px;text-align: center;margin: 10px;padding-bottom: calc(100%/7 - 20px);position: relative;float: left;
        button{
          position: absolute;top: 0;left: 0;font-size: 16px;line-height: 1;color: #fff;text-align: center;display: block;width: 100%;height: 100%;
        }
      }
      .ok {
        background-color: #04cb74;
      }
      .error {
        background-color: #f51b4e;
      }
    }
  }

  .dialog {
    // width: calc(100% - 432px - 10px);height: 700px;background: rgba(255, 255, 255, 1);border: 1px solid rgba(229, 229, 229, 1);border-radius: 5px;float: right;padding:10px;position: relative;
    .topic{
      padding: 10px 20px;max-height: 500px;overflow: auto;
      .right-collection{
        position: absolute;top: 20px;right:60px;height: 26px;display: flex;align-items: center;width: 26px;cursor:pointer
      }
      video{
        width:60%
      }
    }
    // 右侧题目选择
    .question-top {
      height: 50px;border-bottom: 1px solid #e5e5e5;line-height: 50px;color: #91959a;
      .now-index,.total {
        color: #f86f33;
      }
      .now-index {
        font-size: 26px;
      }
      .total {
        font-size: 16px;
      }
      .time {
        float: right;font-size: 14px;color: #101d37
      }
    }
    .question-title {
      margin: 40px 0 30px;font-size: 16px;color: #101d37;line-height: 2;white-space:pre-wrap;
      b{
        font-weight:bold;
      }
    }
    .item {
      display: flex;border-radius: 3px;align-items: center;margin-bottom: 20px;font-size: 16px;line-height: 2;padding: 0 20px;
      .question-content {
        margin-left: 10px;font-size: 16px;
        input{
          height: 36px;padding: 0 10px;border: none;border-bottom: solid 1px #91959a;outline: none;
        }
      }
      // 右侧的按钮
      .chooseBtn {
        color: #101d37;width: 36px;height: 36px;background: #fff;text-align: center;line-height: 38px;border-bottom: 1px solid #91959a;display: block;
      }
      textarea{
        width: 100%;padding: 10px;line-height: 1.75;outline: none;font-size: 16px;border-radius: 3px;border:solid 1px #91959a; resize:none;
      }
    }
    // .item:hover {
    //   background: #EBEEF5
    // }
    .item.active {
      background: #72B6FF;color: #fff
    }
    .item.active .chooseBtn{
      border-color: #72B6FF;color: #72B6FF;
    }
    .item.active .question-content input{
      border-color: #72B6FF;color: #72B6FF;
    }
    // 底部控制按钮
    .controller {
      display: flex;position: absolute;left: 0;bottom: 0;padding: 40px;width: 100%;justify-content: space-between;
    }
  }
}

.bottom-box {
  padding: 20px 15px;
  .my-train {
    height: 40px;display: flex;justify-content: space-between;align-items: center;
    .tip {
      display: flex;align-items: center;
    }
  }
  .box {
    box-sizing: border-box;padding: 30px;width: 380px;height: 350px;border: 8px solid #d5e2f2;border-radius: 10px;margin: 50px auto 0;
    p {
      margin-bottom: 15px;
    }
    .start {
      margin-top: 30px;text-align: center;
      .el-button--primary {
        width: 200px;
      }
    }
  }
}

</style>
